import React, { useState, useEffect, useRef,useMemo } from 'react';
import { GameWrapper, Container } from './style'
import Main from './Main'
import { connect } from 'react-redux';
import { useNavigate } from 'react-router-dom'
import { 
    getCitiesDataAction
} from '@/store/actionCreators'
import { rootState } from '@/store';
import { Dispatch } from 'redux'

interface CitiesProps{
    cities:any[];
    getCitiesDataActionDispatch:()=>void;
}

const Cities:React.FC<CitiesProps> = (props) => {
    const navigate = useNavigate()
    const {cities}=props;
    const {
        getCitiesDataActionDispatch
      }=props
    
    useEffect(() => {
        getCitiesDataActionDispatch();
    }, [])

    return (
        <GameWrapper>
            <div className='search'>
                <i className='iconfont icon-31guanbi icon-right' onClick={()=>navigate('/home/local')}></i>
                <span className="i1">
                <i className="iconfont icon-31sousuo sousuo">&#xe655;</i>
            </span>
            <input type="text" className="box" 
                placeholder="搜索地点" 
                onClick={() => navigate("/search")}
                />
            </div>
            <Main cities={cities} 
            ></Main>
        </GameWrapper>
    )
}
const mapStateToProps = (state:rootState) => {
    return {
        cities:state.MainCities.cities,
    }
}
const mapDispatchToProps = (dispatch:Dispatch) => {
    return {
        getCitiesDataActionDispatch(){
            dispatch(getCitiesDataAction())
          }
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(React.memo(Cities))
